<template>
    <div class="box">
        
        <grid :cols="3">           
                <grid-item v-for="item in list" :key="item" class="center" @click.native="save(item)">
                    <span class="money">{{item}}</span>    
                </grid-item>

        </grid>   
    </div>
</template>
<script>
import { Grid, GridItem } from "vux";
export default {
  components: {
    Grid,
    GridItem
  },
  mounted() {},
  props: {
    list: {
      type: Array,
      required: true
    },
    saved: {
      type: Array,
      required: true
    },
    saving: {
      type: Array,
      required: true
    }
  },
  methods: {
    save: function(money) {
      if (!Number(money) > 0 || money > 365) {
        this.$vux.alert.show({
          title: "警告",

          content: "输入大于0小于365的整数"
        });

        return;
      }
      var date = new Date().toLocaleDateString();
      var data = {
        money: money,
        date: date
      };
      //判断当前日期是否已经存过
      if (this.hasSaved()) {
        this.$vux.toast.show({
          text: "今天已经存过啦！",
          type: "text",
          position: "middle"
        });
        return;
      }
      let _this = this;
      this.$vux.confirm.show({
        title: "温馨提示",
        content: "确定要存吗？",
        onConfirm() {
          _this.saved.push(data);
          localStorage.setItem("money", JSON.stringify(_this.saved));
          _this.saving.remove(money);
          _this.$vux.toast.show({
            type: "text",
            text: "操作成功！",
            position: "middle"
          });
        }
      });
    },
    hasSaved() {
      var date = new Date().toLocaleDateString();
      for (var i = 0; i < this.saved.length; i++) {
        if (this.saved[i].date == date) {
          return true;
        }
      }
      return false;
    }
  }
};
</script>
<style scoped>
.center {
  text-align: center;
}
.money {
  color: red;
  display: block;
}
</style>
